<template>
  <div>
    <div style="width: 740px">
      <el-descriptions title="ODU PTP" :column="2" :border="true">
        <template slot="extra">
          <el-button type="primary" size="small">刷新</el-button>
        </template>
        <el-descriptions-item>
          <template slot="label"> 1.25G时隙的最大数量</template>
          {{ odu.oduCapacity }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 净荷类型</template>
          <div v-for="(i,key) in odu.oduSignalType" :key="key">
            <p>{{ i }}</p>
            <!--                <el-divider direction="vertical"></el-divider>-->
          </div>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 适配类型</template>
          <div v-for="i in odu.adaptationType">
            <p>{{ i }}</p>
          </div>
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label"> 交换能力</template>
          <div v-for="i in odu.switchCapability">
            <p>{{ i }}</p>
          </div>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 时隙占用</template>
          <p>{{ odu.tsDetail }}</p>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"></template>
          <p></p>
        </el-descriptions-item>

        <el-descriptions-item label-class-name="am_info">
          <template slot="label">SM 实际接收开销</template>
          <p>{{ odu.sMTrailTraceActualRx }}</p>
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label" class="am_info"> PM 实际接收开销</template>
          <p>{{ odu.pMTrailTraceActualRx }}</p>
        </el-descriptions-item>
      </el-descriptions>
    </div>

    <div
        style="
            float: left;
            border: 2px solid #1b75ba;
            margin-top: 6px;
            padding-top: 5px;
            padding-right: 5px;
            border-radius: 20px;
          "
    >
      <el-form label-width="150px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="SM 实际发送开销">
              <el-input v-model="odu.sMTrailTraceActualTx" clearable
                        placeholder="Sapi-tapi-operatorSpecific"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="SM 期望接收开销">
              <el-input v-model="odu.sMTrailTraceExpectedRx" clearable
                        placeholder="Sapi-tapi-operatorSpecific"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="PM 实际发送开销">
              <el-input v-model="odu.pMTrailTraceActualTx" clearable
                        placeholder="Sapi-tapi-operatorSpecific"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="PM 期望接收开销">
              <el-input v-model="odu.pMTrailTraceExpectedRx" clearable
                        placeholder="Sapi-tapi-operatorSpecific"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item style="float: right">
          <el-button type="primary" @click="onSubmit">提交</el-button>
          <el-button @click="resetForm('pgForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

  </div>
</template>

<script>
import {
  xc_adaptationType,
  xc_switchType,
  xc_clientSignalType,
} from "@/assets/config/XcPac.js";

export default {
  name: "Odu",
  data() {
    return {
      value: true,
      xc_clientSignalType,
      adaptationType: xc_adaptationType,
      xc_switchType: xc_switchType,
      odu: {
        oduCapacity: "8021445",
        oduSignalType: ["ODU0", "ODU1", "ODU2"],
        adaptationType: ["CBR_AMP", "GFP-T", "CBR_BMP", "NULL"],
        switchCapability: ["ODU0", "ODU1", "ODU2"],
        tsDetail: "1-2-3",
        sMTrailTraceExpectedRx: "03-2d-101",
        sMTrailTraceActualTx: "03-2d-201",
        sMTrailTraceActualRx: "02-2d-301",

        pMTrailTraceExpectedRx: "14-25-ad",
        pMTrailTraceActualTx: "14-25-ad",
        pMTrailTraceActualRx: "00-05-00",
      },
    };
  },
  props: ["node", "ptp"],
  methods: {
    async editOdu() {
      console.log("所选节点名称： ", this.node);
      console.log("设置数据： ", this.odu);
      const {data: res} = await this.$http.post("/node/odu", this.odu);
      console.log(res);
    },
    submitForm(formName) {

      console.log(formName)
    },
    resetForm() {

    },
    onSubmit() {

    }
  },
};
</script>

<style scoped>
.config_odu_div {
  width: 500px;
  height: auto;
  float: left;
  /*padding-right: 6px;*/
  margin-left: 3px;
  border: 1px solid #0038f5;
}

.am_info {
  background-color: rgb(6, 129, 211);
  font-size: 600;
}

.am-content {
  background: rgb(218, 87, 137);
}

.control_odu_ptp {
  float: left;
}
</style>